<template>
  <section class="module-list"  v-loading="loading">
      <div  class="module-box" v-for="m in list" :key="m.id">
        <div class="module-content">
          <div class="module-hover">
            <div>详情</div>
            <el-button type="text" @click="enterBtn(m)">进入模块</el-button>
          </div>
          <div class="module-name">
            {{m.name}}
          </div>
        </div>
      </div>
      <!-- <div class="module-box module-content" @click="addBtn">
        <i class="el-icon-plus" />
      </div> -->
  </section>
</template>

<script>
  import { createNamespacedHelpers } from 'vuex'
  const { mapState, mapActions } = createNamespacedHelpers(process.env.VUE_APP_MODULE_TITLE)
  export default {
    name: "moduleList",
    components:{},
    data(){
      return{
        loading:false,
        list:[],
        editDialog:false        
      }
    },
    computed:{
      teamId(){
        return parseFloat(this.$route.params.id)
      },
      ...mapState({
        modeModuleList:state=>state.modeModuleList
      })
    },
    created(){
      console.log('什么情况----------',this.modeModuleList)
      this.list=JSON.parse(JSON.stringify(this.modeModuleList))
    },
    methods:{
      enterBtn(module){
        console.log('看看进入哪个模块--------------',module.id)
        this.getTeamModuleList(team.id)
      },
      getTeamModuleList(id){
        let index = this.modeModule.findIndex(m=>m.id === id)
        if(index <0){
         alert('该公司无模块资源')
          return
        }
        let tmp = this.modeModule[index]
        let moduleList=[]
        tmp.moduleList.forEach(m=>{
          if(m.url){
            moduleList.push(m.url)
          }
        })
        if(moduleList.length<=0){
          alert('该公司无模块资源')
          return
        }
        let objM={}
        moduleList.forEach(m=>{
          objM[m.name]=m.path
        })
        this.$eventBus.on('getModule',(e)=>{
          console.log('加载完模块了，看看是什么模块',e)
          this.$router.push('/module-management/'+id)
        })
        this.$moduleLoader(objM)
        // console.log('加载模块后')
        // this.$eventBus.emit('getModule')
      },
      addBtn(){
        console.log('添加一个新公司')
        this.currTeam={name:'新建一个公司',data:{}}
        this.editDialog=true
      },
      cancelEvt(){
        console.log('新建或更新完毕------------')
        //重新获取team列表
        this.editDialog=false
        this.currTeam=null
        this.getTeamList()
      },
      getTeamList(){
        // /global/team/list
      },
    }
  }
</script>

<style scoped>
.team-list{
  display: flex;
  flex-direction: row;
  flex-wrap:wrap;
  border:0px solid red;
}
.team-box{
  border: 0px solid blue;
  margin: 10px;
  width: 280px;
}
.team-box:hover .team-hover{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 280px;
  background-color: #cd8c95cc;
  /* border: 1px solid black; */
  /* top:-10px; */
  height:100px;
  position: absolute;
  color: black;
  border-radius: 10px;
}
.team-content{
  /* width: 100%; */
  cursor: pointer;
  height:100px;
  /* border: 1px solid #FFE4E1; */
  background-color: #FFE4E1;
  color: #F08080;
  border-radius: 10px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center
}
.team-hover{
  display: none;
}
.el-icon-plus{
  font-size: 30px
}
</style>
